<template>
  <div>
    <vue-particles
        class="login-background"
        color="#97D0F2"
        :particleOpacity="0.8"
        :particlesNumber="80"
        shapeType="circle"
        :particleSize="4"
        linesColor="#97D0F2"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push">
    </vue-particles>
    <!--  两层标题  -->
    <div><p style="color: #95cdff; height: 1px; width: 100%"></p></div>
    <div class="title"
         style="height:80px; margin-top: calc(calc(100vh - 700px) / 2); font-size: 60px; font-family: '幼圆'">
      <b>进销存管理系统</b>
    </div>
    <div class="title" style="font-size: 50px; font-family: 'comic sans MS'; margin-top: 10px">
      <b>Invoicing management systems</b>
    </div>
    <!--  面板  -->
    <div class="real_wrapper">
      <div class="title" style="font-size: 30px;"><b>登 录</b></div>
      <el-form :model="user" :rules="rules" ref="userForm" style="margin-top: 20px">
        <el-form-item prop="username">
          <el-input size="medium" style="margin: 10px 0;" prefix-icon="el-icon-user"
                    v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-lock" show-password
                    v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入验证码（正在建设中）" size="medium" style="margin: 10px 0;" prefix-icon="el-icon-mobile-phone"></el-input>
        </el-form-item>
        <el-form-item style="margin-top: 35px; text-align: center">
          <el-button type="warning"
                     size="medium"
                     style="border-radius: 20px; width: 70px; height: 40px"
                     autocomplete="off"
                     @click="resetForm('ruleForm')">重置
          </el-button>
          <el-button type="primary"
                     size="medium"
                     style="margin-left: 20px;border-radius: 20px; width: 70px; height: 40px"
                     autocomplete="off"
                     @click="login">登录
          </el-button>
          <el-button type="info"
                     size="medium"
                     style="margin-left: 20px;border-radius: 20px; width: 70px; height: 40px"
                     autocomplete="off"
                     @click="$router.push('/register')">注册
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      user: {},
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
        ],
      }
    }
  },
  methods: {
    login() {
      this.$refs['userForm'].validate((valid) => {
        if (valid) {  // 表单校验合法
          this.request.post("/user/login", this.user).then(res => {
            if (res.code === '200') {
              localStorage.setItem("user", JSON.stringify(res.data)) // 存储用户信息到浏览器
              // this.$router.push("/")
              window.location.href = "/"
              this.$message.success("登录成功！")
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      });
    },
    resetForm(formName) {
      this.$refs["userForm"].resetFields();
    }
  }
}
</script>

<style>
.login-background {
  /*background: linear-gradient(-180deg, #95cdff 0%, #ffffff 50%);*/
  background: url("../resources/Windows Insider 4K.jpg") center center no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%; /**宽高100%是为了图片铺满屏幕 */
  z-index: -1;
  position: absolute;
  overflow: hidden;
}

.real_wrapper {
  margin-top: 60px;
  margin-left: calc(calc(100vw - 350px) / 2);
  width: 350px;
  height: 420px;
  padding: 40px;
  position: absolute;
  background-color: rgba(215, 215, 215, 0.8);
  border-radius: 20px;
  box-shadow: 0 0 20px #707070;
  border: 1px solid gray;
  z-index: 1;
}

.title {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  text-align: center;
  font-family: '幼圆'
}

</style>
